<template>
  <div class="page">
    <div class="J-recharge-box">
      <div class="J-nav pl line-bottom">
        <div class="fl">可用余额：{{getRechargeInfo.balance}} 元</div>
        <router-link :to="'/recharge/list?id='+$route.query.id" class="fr">消费记录</router-link>
      </div>
      <div class="recharge_from">
        <div class="name">请选择金额进行充值</div>
        <div class="from_ pl line-bottom line-top">
          <div class="weui-flex pl line-right">
            <div class="weui-flex__item pl line-left" v-for='(item,index) in getRechargeInfo.balance_options'>
              <div class="_number_" :class="{active:item.active}" @click="setActive(index)">
                <span class="J-price">{{item.recharge_money}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="privilege" v-if="privilege" v-html="privilege"></div>
      <div class="recharge_other">
        <div class="weui-flex pl line-bottom line-top">
          <div class="weui-flex__item pl line-right line-left">
            <input class="weui-input" v-model="inputVal" @focus="focusFun" type="tel" placeholder="其他金额">
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">
            <a href="javascript:;" @click="submitPrice" class="weui-btn weui-btn_primary">充值</a>
          </div>
        </div>
      </div>
      <div class="recharge_text">
        <div class="p">会员可根据充值金额享受不同优惠<br>会员卡等级会根据最近一次充值的金额进行会员等级的调整</div>
      </div>
    </div>
  </div>
</template>
<script>
//  const config = require('src/config')
  import { mapGetters } from 'vuex'
  export default {
    name: 'recharge',
    data () {
      return {
        inputVal: '',
        privilege: '',
        config: {
          id: this.$route.query.id,
          recharge_money:'',
          option_id: ''
        },
        Price: [{
          name: '2000',
          level: '普通会员卡',
          active: false
        },
        {
          name: '3000',
          level: 'VIP会员卡',
          active: false
        }]
      }
    },
    components: {

    },
    computed: {
      ...mapGetters({
        getRechargeInfo: 'getRechargeInfo',
        getPayInfo: 'getPayInfo',
      })
    },
    watch: {
      'getPayInfo' (val) {
        var _this = this
        if (val.pay_channel == '0') {
          function onBridgeReady(){
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', val.pay_info,
              function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                  location.href = '/card?id=' + _this.$route.query.id
                }
              }
            );
          }
          if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          }else{
            onBridgeReady();
          }
        }
      }
    },
    mounted () {
      var _this = this
      if (_this.getRechargeInfo){
        _this.$store.dispatch('getRechargeInfo', this.config)
      }
    },
    methods: {
      resize (scroller) {
        setTimeout(() => {
          scroller && scroller.resize()
        })
      },
      setActive (index) {
        var _this = this
        _this.getRechargeInfo.balance_options.map(function (v, i) {
          if (i === index) {
            v.active = true
            _this.inputVal = ''
            _this.config.option_id = v.id
            _this.config.recharge_money = v.recharge_money
            _this.privilege = v.privilege
          } else {
            v.active = false
          }
        })
      },
      focusFun () {
        var _this = this
        _this.getRechargeInfo.balance_options.map(function (v, i) {
          v.active = false
        })
        _this.privilege = ''
      },
      submitPrice () {
        this.$store.dispatch('addRecharge', this.config)
      }
    }
  }
</script>
<style lang="scss">
  .J-recharge-box{

  }
  .privilege{
    margin:5px 15px;
    font-size:12px;
    color: red;
  }
  .recharge_from{
    margin-top:10px;
    .from_{
      margin: 15px;
    }
    .name{
      padding:0 15px;
      color:#868686;
      font-size:12px;
    }
    ._number_{
      text-align: center;
      background-color:#fff;
      padding:14px 0;
      line-height:16px;
      font-size:16px;
      ._level{
        color:red;
        font-size:12px;
        overflow: hidden;
        margin:0 4px;
        text-overflow:ellipsis;
        white-space: nowrap;
        display: block;
      }
    }
    ._number_.active{
      background-color:#00CC00;
      color:#fff;
      ._level{
        color:#fff;
      }
    }
  }
  .recharge_other{
    padding:0 12px;
    margin-top: 10px;
    .line-right::after{
      border-left:none;
      right:-1px;
      left:inherit
    }
    .weui-input{
      padding:10px 0;
      font-size:14px;
      background-color:#fff;
      text-indent:.7em;
    }
    .weui-flex:last-child{
      margin-top:10px;
    }
    .line-bottom{
      &:after{
        bottom:-2px;
      }
    }
  }
  .recharge_text{
    margin-top: 15px;
    padding:0 15px;
    font-size:14px;
    color:#333;
    line-height:20px;
  }
</style>
